import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'dva'
import { Typography, Select } from 'antd'
import { router } from 'utils'
import { stringify } from 'qs'
import { Trans, withI18n } from '@lingui/react'
import { Page } from 'components'
import List from '../components/List'
const { Title } = Typography

const Option = Select.Option
// const { Content } = Layout

@withI18n()
@connect(({ auths, app, loading }) => ({ auths, app, loading }))
class Post extends PureComponent {
  render() {
    const { auths, loading, app, location, dispatch } = this.props
    const { data, select } = auths
    const { isMobile } = app
    const { query, pathname } = location
    // let authsitems = data[select]
    // authsitems = authsitems ? authsitems : []
    const handlerefresh = newquery => {
      router.push({
        pathname,
        search: stringify({
          ...query,
          ...newquery,
        }),
      })
    }
    const listProps = {
      // pagination,
      select,
      hadauths: data[select],
      dataSource: data['allauths'],
      loading: loading.effects[`auths/query`],
      setloading: loading.effects[`auths/setauths`],
      setauths: payload => {
        dispatch({
          type: 'auths/setauths',
          payload,
        }).then(() => {
          dispatch({
            type: 'auths/query',
            payload: { ...query },
          })
        })
      },
    }
    const handleChange = item => {
      handlerefresh({
        select: item,
      })
    }
    return (
      <Page inner>
        <div
          style={{
            paddingLeft: isMobile ? '0px' : '14px',
            paddingRight: isMobile ? '0px' : '14px',
            paddingTop: '0px',
          }}
        >
          <div style={{ display: 'inline' }}>
            <Title level={4} style={{ display: 'inline-block' }}>
              <Trans>Authority</Trans>:
            </Title>
            <Select
              value={select}
              style={{
                width: 120,
                marginLeft: '10px',
                display: 'inline-block',
              }}
              onChange={handleChange}
            >
              {data &&
                data.keys &&
                data.keys.map(key => (
                  <Option key={key} value={key}>
                    {key}
                  </Option>
                ))}
            </Select>
          </div>
          <List {...listProps} />
        </div>
      </Page>
    )
  }
}

Post.propTypes = {
  post: PropTypes.object,
  loading: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
}

export default Post
